<template>
  <div class="page-wrapper">
    <div>
      <p>这个是count:{{count}}</p>
      <button @click="addCount">加</button>
    </div>
    <div>
      <p>这个是num:{{num}}</p>
      <button @click="addNum">加</button>
    </div>
    <div>
      <p>这个是double：{{double}}</p>
      <p>这个是totalCount：{{totalCount}}</p>
      <p>这个是doubleCount：{{doubleCount}}</p>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs, computed } from "vue";
export default {
  name: "Test",
  setup(props,context) {
    const state = reactive({
      count: 0,
      double: computed(() => {
        return state.count * 2;
      }),
    });

    const num = ref(0);

    const addCount = function () {
      state.count++;
    };
    const addNum = function () {
      num.value++;
    };

    const totalCount = computed(() => state.count + num.value);

    const doubleCount = computed({
      get() {
        return state.count * 2;
      },
      set(newVal) {
        debugger //貌似没有进来
        state.count = newVal / 2;
      },
    });

    return {
      ...toRefs(state),
      num,
      addCount,
      addNum,
      totalCount,
      doubleCount
    };
  },
};
</script>